<template>
  <div>
    <div class="n-song">
      <div class="song-fsize">
        <el-link :underline="false" href="#" target="_blank" class="e-title"
          >歌曲榜单</el-link
        >
      </div>
      <div class="song-fleft"><el-link>更多</el-link></div>
    </div>
    <div id="List">
      <el-table :data="Songlists" border style="width: 100%;">
        <el-table-column prop="" label="歌曲排名" width="180">
        </el-table-column>
        <el-table-column prop="songName" label="歌曲名称" width="180">
        </el-table-column>
        <el-table-column prop="singerName" label="歌手"></el-table-column>
        <el-table-column  label="时长">
            <ul>
                <li>播放</li>
                <li>收藏</li>
                <li>查看</li>
            </ul>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //数组接收res
      Songlists: [],
    };
  },
  //页面加载后自动调用
  mounted() { 
      // this.GetSongList(); 
  },
  methods: {
    //获取热门歌单
    GetSongList: function () {
      var thisvue = this;
      this.$http
        .get("http://localhost:31551/api/Song/GetSongQuantity10")
        .then(function (res) {
          thisvue.Songlists = res.data;
        });
    },
  },
};
</script>